<template>
  <div class="chart-container">
    <div class="chart-header">
      <h3>项目进度状态统计</h3>
    </div>
    <div class="chart-wrapper">
      <div ref="barChart" class="bar-chart"></div>
    </div>
  </div>
</template>

<script>
import { getAction } from "@/api/manage";
import * as echarts from "echarts";

export default {
  name: "ProjectStatistics",
  data() {
    return {
      chartInstance: null,
      chartData: {
        categories: [],
        seriesData: [
         
        ]
      }
    };
  },
  mounted() {
    this.initChart();
    this.loadData();
    window.addEventListener("resize", this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.barChart);
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '15%',
          left: '10%',
          right: '5%',
          bottom: '20%'
        },
        xAxis: {
          type: 'category',
          data: this.chartData.categories,
          axisLabel: {
            interval: 0,
            rotate: 45,
            textStyle: {
              color: '#FFFFFF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          }
        },
        series: [{
          name: '数量',
          type: 'line',
          data: this.chartData.seriesData,
          itemStyle: {
            color: '#22A4F8'
          },
          lineStyle: {
            width: 2,
            type: 'solid'
          },
          symbol: 'circle',
          symbolSize: 6,
          label: {
            show: true,
            position: 'top'
          }
        }]
      };
      
      this.chartInstance.setOption(option);
    },
    resizeChart() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    },
    loadData() {
      getAction('/projectBaseInfo/projectBaseInfo/listByStatusGroup').then(response => {
        const categories = response.rows.map(item => item.status);
        const seriesData = response.rows.map(item => ({
          value: item.count,
          name: item.status
        }));
        
        this.chartData = { categories, seriesData };
        this.updateChart();
      });
    },
    updateChart() {
      if (this.chartInstance) {
        const option = this.chartInstance.getOption();
        option.xAxis[0].data = this.chartData.categories;
        option.series[0].data = this.chartData.seriesData;
        this.chartInstance.setOption(option);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.chart-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.chart-header {
  text-align: center;
  margin-bottom: 15px;
  h3 {
    color: #ffffff;
    font-size: 1.2rem;
  }
}

.chart-wrapper {
  background-color: #1a253d;
  border-radius: 4px;
  padding: 15px;
  height: 400px;
}

.bar-chart {
  width: 100%;
  height: 100%;
}
</style>